<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>

    <script src="./reactive.js"></script>
    <script src="./renderer.js"></script>
    <script>
        // 1. 通过h函数来创建一个vnode
        const vnode =  h('div', {class: 'old', id: 'aaa'}, [
            h('div',{id: 'computed'} , '1'),
            h('button',  {onClick: () => {
                document.querySelector('#computed').textContent = 1 + +document.querySelector('#computed').textContent
            }}, '+1')
        ])
        
        // 2. 通过mount函数，将vnode挂载到div#app上
        mount(vnode, document.querySelector('#app'))
        
        // 3. 创建一个新的vnode
        const vnode1 = h('div', {class: 'new', id: 'aaa'},  [
            h('div',{id: 'computed'} , '1'),
            h('button',  {onClick: () => {
                console.log('啥都没有')
            }}, '+1')
        ])
        setTimeout(() => {
            patch(vnode, vnode1)
        }, 5000)
    </script>
</body>
</html>